<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <title>Div Drag/Resize Demo</title>
  <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
 <script type="text/javascript" src="dragresize.js"></script>

<style type="text/css">

/* Required CSS classes: must be included in all pages using this script */

/* Apply the element you want to drag/resize */
.drsElement {
 position: absolute;
 border: 1px solid #333;
}

/*
 The main mouse handle that moves the whole element.
 You can apply to the same tag as drsElement if you want.
*/
.drsMoveHandle {
 height: 20px;
 background-color: #CCC;
 border-bottom: 1px solid #666;
 cursor: move;
}

/*
 The DragResize object name is automatically applied to all generated
 corner resize handles, as well as one of the individual classes below.
*/
.dragresize {
 position: absolute;
 width: 5px;
 height: 5px;
 font-size: 1px;
 background: #EEE;
 border: 1px solid #333;
}

/*
 Individual corner classes - required for resize support.
 These are based on the object name plus the handle ID.
*/
.dragresize-tl {
 top: -1px;
 left: -1px;
 cursor: nw-resize;
}
.dragresize-tm {
 top: -1px;
 left: 3px;
 width:100%;
 margin-left: -4px;
 cursor: n-resize;
}
.dragresize-tr {
 top: -1px;
 right: -1px;
 cursor: ne-resize;
}

.dragresize-ml {
 top: 3px;
 margin-top: -4px;
 left: -1px;
 height: 100%;
 cursor: w-resize;
}
.dragresize-mr {
 top: 3px;
  height: 100%;
 margin-top: -4px;
 right: -1px;
 cursor: e-resize;
}

.dragresize-bl {
 bottom: -1px;
 left: -1px;
 cursor: sw-resize;
}
.dragresize-bm {
 bottom: -1px;
 left: 3px;
 width:100%;
 margin-left: -4px;
 cursor: s-resize;
}
.dragresize-br {
 bottom: -1px;
 right: -1px;
 cursor: se-resize;
}

</style>

<script type="text/javascript">
//<![CDATA[

// Using DragResize is simple!
// You first declare a new DragResize() object, passing its own name and an object
// whose keys constitute optional parameters/settings:

var dragresize = new DragResize('dragresize', { minWidth: 50, minHeight: 50, minLeft: 20, minTop: 20, maxLeft: 1200, maxTop: 600 });

// Optional settings/properties of the DragResize object are:
//  enabled: Toggle whether the object is active.
//  handles[]: An array of drag handles to use (see the .JS file).
//  minWidth, minHeight: Minimum size to which elements are resized (in pixels).
//  minLeft, maxLeft, minTop, maxTop: Bounding box (in pixels).

// Next, you must define two functions, isElement and isHandle. These are passed
// a given DOM element, and must "return true" if the element in question is a
// draggable element or draggable handle. Here, I'm checking for the CSS classname
// of the elements, but you have have any combination of conditions you like:

dragresize.isElement = function(elm)
{
 if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
};
dragresize.isHandle = function(elm)
{
 if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;
};

// You can define optional functions that are called as elements are dragged/resized.
// Some are passed true if the source event was a resize, or false if it's a drag.
// The focus/blur events are called as handles are added/removed from an object,
// and the others are called as users drag, move and release the object's handles.
// You might use these to examine the properties of the DragResize object to sync
// other page elements, etc.

dragresize.ondragfocus = function() { };
dragresize.ondragstart = function(isResize) { };
dragresize.ondragmove = function(isResize) { };
dragresize.ondragend = function(isResize) { };
dragresize.ondragblur = function() { };

// Finally, you must apply() your DragResize object to a DOM node; all children of this
// node will then be made draggable. Here, I'm applying to the entire document.
dragresize.apply(document);

//]]>

 
</script>

</head>
<body style="font: 13px/20px sans-serif; background-color: #FFF">
 


<!--
 Here's our draggable elements.
 All that's required is that they have a relative or absolute CSS 'position',
 and are matched by the isElement/isHandle methods of a DragResize object.
 Easy!
-->

 
<div class="drsElement drsMoveHandle" style="left: 150px; top: 280px; width: 50px; height: 100px; background: #DFC; text-align: center">
 Div 2
 Content
</div>

<div class="drsElement drsMoveHandle" style="left: 150px; top: 280px; width: 50px; height: 100px; background: #DFC; text-align: center">
 Div 2
 Content
</div>
<div class="drsElement drsMoveHandle" style="left: 150px; top: 280px; width: 50px; height: 100px; background: #DFC; text-align: center">
 Div 2
 Content
</div>

<div id="testtemp" style="margin-top: 400px;width:100px;height:100px;    border: 1px solid #333;"  ><div></div></div>
 
<div id="mydiv" style="margin-top: 100px;width:100px;height:100px;    border: 1px solid #333;"   >法第1方</div>
</body>
<script type="text/javascript">
 $("#testtemp").on("dragstart", function(e){
	console.info(e);
 	$("#mydiv").append('<div class="drsElement drsMoveHandle" style="left: 150px; top: 280px; width: 50px; height: 100px; background: #DFC; text-align: center"> Div 2 Content</div>');

 });
</script>
</html>